<template>
    <div class="bookshelf">
        <van-nav-bar title="宝贝书架" right-text="管理" @click-left="delBook" @click-right="management">
            <template #left>
                <van-icon v-show="flat" name="delete" size="0.48rem" />
            </template>
        </van-nav-bar>
        <div class="book" v-if="arr">
            <bookCom :flat="flat" @del="foo" :item="item" v-for="item in arr" :key="item['uid']"></bookCom>
        </div>
        <van-empty v-show="isEmpty" description="书架为空" />
    </div>
</template>

<script>
import bookCom from "../../components/bookCom.vue";

export default {
    components: {
        bookCom,
    },
    data() {
        return {
            num: 0,
            arr: [],
            flat: false,
            delBookList: [],
        };
    },

    computed: {
        isEmpty() {
            if (this.arr.length == 0) {
                return true;
            } else {
                return false;
            }
        },
    },
    methods: {
        management() {
            this.flat = !this.flat;
        },
        getBooks() {
            if (localStorage.getItem("flat") && localStorage.getItem("loginUser")) {
                let bookData = JSON.parse(localStorage.getItem("flat"));

                let bookLogin = JSON.parse(localStorage.getItem("loginUser")).username;
                if (bookData) {
                    this.arr = bookData.filter((item) => {
                        return item["flat"] == 1 && item["yyid"] == bookLogin;
                    });
                }
            }
        },
        delBook() {
            if (this.flat) {
                for (let i = 0; i < this.delBookList.length; i++) {
                    let a = this.arr.findIndex((item) => {
                        return item["uid"] == this.delBookList[i]["id"];
                    });
                    this.arr.splice(a, 1);
                }
                this.delBookList = [];
                this.flat = false;

                localStorage.setItem("flat", JSON.stringify(this.arr));
            }
        },
        foo(parmas) {
            let iIndex = this.delBookList.findIndex((item) => {
                return item["id"] == parmas["id"];
            });
            if (iIndex == -1) {
                this.delBookList.push(parmas);
            } else {
                this.delBookList.splice(iIndex, 1);
            }
        },
    },
    created() {
        this.getBooks();
    },
    beforeRouteLeave(to, from, next) {
        this.delBookList = [];
        next();
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            // console.log(vm);
            vm.token = localStorage.getItem("pass");
            // console.log(vm.token);
            if (vm.token) {
                next();
            } else {
                alert("未登录,请先登录!");
                vm.$router.push("/login");
            }
        });
    },
};
</script>

<style lang="scss" scope>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";
.van-nav-bar__text {
    color: $activeColor;
}
.van-nav-bar .van-icon {
    color: $activeColor;
}

.book {
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    .bookTab {
        margin-left: 0.07rem;
        margin-top: 0.0533rem;
        border: 1px solid whitesmoke;
    }
}
</style>
